<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'认知'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
    <div class="analyItem">
        <p class="analyItemTit tx-center">基础</p>
        <div class="analyItemCon">
            <p class="col-md-4">
                <span class="cLightGray pr8">年龄</span>
                <span name="stage_info_age">{{stageInfo.age ? stageInfo.age : ''}}</span>
            </p>
            <p class="col-md-4">
                <span class="cLightGray pr8">婚否</span>
                <span name="stage_info_is_marry">{{ stageInfo.is_marry ? (Number(stageInfo.is_marry) === 0 ? '已婚' : '未婚') : ''}}</span>
            </p>
        </div>
    </div>
    <div class="analyItem">
        <p class="analyItemTit tx-center">住址</p>
        <div class="analyItemCon">
            <p class="col-md-10">
                <span class="cLightGray pr8">现住址</span>
                <span name="stage_info_address">{{stageInfo.address ? stageInfo.address : ''}}</span>
            </p>
        </div>
    </div>
    <div class="analyItem">
        <p class="analyItemTit tx-center">学历</p>
        <div class="analyItemCon">
            <p class="col-md-4">
                <span class="cLightGray pr8">学历</span>
                <span name="stage_info_education">{{stageInfo.education ? stageInfo.education : ''}}</span>
            </p>
            <p class="col-md-4">
                <span class="cLightGray pr8">证件</span>
                <span name="stage_info_certificates">{{stageInfo.certificates ? stageInfo.certificates : ''}}</span>
            </p>
        </div>
    </div>
    <div class="analyItem">
        <p class="analyItemTit tx-center">身份证</p>
        <div class="analyItemCon">
            <p class="col-md-6">
                <rx-viewer :images="positiveUrlList" class="fl ml10 ">
                    <div class="clearfix">
                        <div class="imgInfo tx-center">身份证正面</div>
                        <div v-for="(item, index) of positiveUrlList" :key="index" class="fl mr10">
                            <img :src="item.url | smallImg(80, 80)" :alt="index">
                        </div>
                    </div>
                </rx-viewer>
            </p>
            <p class="col-md-6">
                <rx-viewer :images="oppositeUrlList" class="fl ml10 ">
                    <div class="clearfix">
                        <div class="imgInfo tx-center">身份证反面</div>
                        <div v-for="(item, index) of oppositeUrlList" :key="index" class="fl mr10">
                            <img :src="item.url | smallImg(80, 80)" :alt="index">
                        </div>
                    </div>
                </rx-viewer>
            </p>
            <!-- <p></p> -->
        </div>
    </div>
    <div class="analyItem">
        <p class="analyItemTit tx-center">APP</p>
        <div class="analyItemCon">
            <p class="col-md-4">
                <span class="cLightGray pr8">激活</span>
                <span name="stage_info_is_activation_app">{{ this.stageInfo.activation_app ? (Number(this.stageInfo.activation_app) === 0 ? '已激活' : '未激活') : '' }}</span>
            </p>
        </div>
    </div>
    <div class="analyItem">
        <p class="analyItemTit tx-center">紧急联系人</p>
        <div class="analyItemCon">
            <p class="col-md-4">
                <span class="cLightGray pr8">姓名</span>
                <span name="stage_info_family_name">{{ this.stageInfo.family_name ? this.stageInfo.family_name : '' }}</span>
            </p>
            <p class="col-md-4">
                <span class="cLightGray pr8">关系</span>
                <span name="stage_info_family_relation">{{ this.stageInfo.family_relation ? this.stageInfo.family_relation : '' }}</span>
            </p>
            <p class="col-md-4">
                <span class="cLightGray pr8">电话</span>
                <span name="stage_info_family_phone">{{ this.stageInfo.family_phone ? this.stageInfo.family_phone : '' }}</span>
            </p>
            <p class="col-md-4">
                <span class="cLightGray pr8">微信</span>
                <span name="stage_info_family_wechat">{{ this.stageInfo.family_wechat ? this.stageInfo.family_wechat : '' }}</span>
            </p>
            <p class="col-md-4">
                <span class="cLightGray pr8">性别</span>
                <span name="stage_info_family_sex">{{ this.stageInfo.family_sex ? (this.stageInfo.family_sex === 0 ? '女' : '男') : '' }}</span>
            </p>
        </div>
    </div>

</div>

            <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">

            </div>
        </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { findPhotoByUid } from '../../Resources/Api'
export default {
    data () {
        return {
            oppositeUrlList: [], // 身份证反面
            positiveUrlList: [], // 身份证正面
            stageInfo: {}
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    created () {
        this.stageInfo = this.$route.query.stageInfo
        this.findPhotoByUid()
        this.findPhotoByUids()
    },
    methods: {// 身份证照片正面回显
        findPhotoByUid () {
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: 9 // 正面
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.positiveUrlList = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 身份证照片反面回显
        findPhotoByUids () {
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: 8 // 反面
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.oppositeUrlList = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        }

    },
    route () {
    }
}
</script>

